<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>任务管理系统</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>任务管理系统</h1>

        <div class="input-section">
            <input type="text" id="taskInput" placeholder="输入新任务...">
            <button onclick="addTask()">添加任务</button>
        </div>

        <ul id="taskList"></ul>

        <div class="stats">
            <p>总任务数：<span id="total">0</span></p>
            <p>已完成：<span id="completed">0</span></p>
            <p>未完成：<span id="pending">0</span></p>
        </div>

        <div id="chart" style="width: 400px; height: 300px;"></div>
    </div>

    <script src="echarts.min.js"></script>
    <script src="app.js"></script>
</body>

</html>
<script src="
https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js
"></script>

<script>
    // 获取元素
        var taskInput = document.getElementById("taskInput");
        var taskList = document.getElementById("taskList");
        var totalSpan = document.getElementById("total");
        var completedSpan = document.getElementById("completed");
        var pendingSpan = document.getElementById("pending");

        // 初始化任务数组
        var tasks = [];

        // 加载本地数据
        window.onload = function () {
            var savedTasks = localStorage.getItem("tasks");
            if (savedTasks) {
                tasks = JSON.parse(savedTasks);
            }
            renderTasks();
            updateStats();
            drawChart();
        };

        // 添加任务
        function addTask() {
            var taskText = taskInput.value.trim();
            if (taskText === "") return;

            var newTask = {
                id: Date.now(),
                text: taskText,
                completed: false
            };

            tasks.push(newTask);
            taskInput.value = "";
            saveTasks();
            renderTasks();
            updateStats();
            drawChart();
        }

        // 渲染任务列表
        function renderTasks() {
            taskList.innerHTML = "";

            tasks.forEach(function (task) {
                var li = document.createElement("li");

                var span = document.createElement("span");
                span.textContent = task.text;
                if (task.completed) {
                    span.style.textDecoration = "line-through";
                }

                var btnGroup = document.createElement("div");

                var completeBtn = document.createElement("button");
                completeBtn.textContent = task.completed ? "撤销" : "完成";
                completeBtn.onclick = function () {
                    task.completed = !task.completed;
                    saveTasks();
                    renderTasks();
                    updateStats();
                    drawChart();
                };

                var deleteBtn = document.createElement("button");
                deleteBtn.textContent = "删除";
                deleteBtn.onclick = function () {
                    tasks = tasks.filter(function (t) { return t.id !== task.id; });
                    saveTasks();
                    renderTasks();
                    updateStats();
                    drawChart();
                };

                btnGroup.appendChild(completeBtn);
                btnGroup.appendChild(deleteBtn);

                li.appendChild(span);
                li.appendChild(btnGroup);

                taskList.appendChild(li);
            });
        }

        // 更新统计信息
        function updateStats() {
            var total = tasks.length;
            var completed = tasks.filter(function (task) { return task.completed; }).length;
            var pending = total - completed;

            totalSpan.textContent = total;
            completedSpan.textContent = completed;
            pendingSpan.textContent = pending;
        }

        // 保存到 localStorage
        function saveTasks() {
            localStorage.setItem("tasks", JSON.stringify(tasks));
        }

        // 绘制图表
        function drawChart() {
            var completedCount = tasks.filter(function (task) { return task.completed; }).length;
            var pendingCount = tasks.length - completedCount;

            var chartDom = document.getElementById('chart');
            var myChart = echarts.init(chartDom);

            var option = {
                title: {
                    text: '任务统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '任务状态',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: completedCount, name: '已完成' },
                            { value: pendingCount, name: '未完成' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0,0,0,0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option, true);
        }
</script>
<style>
    body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.input-section input {
    width: 70%;
    padding: 8px;
    margin-right: 10px;
}

.input-section button {
    padding: 8px 12px;
}

#taskList {
    list-style-type: none;
    padding-left: 0;
}

#taskList li {
    padding: 10px;
    margin-bottom: 8px;
    background: #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
}

.stats {
    margin-top: 20px;
}
</style>